<template>
  <div id="app">
    <div id="wrapper">
      <!-- /.navbar-top-links -->
      <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">跳板机</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="index.html">开源跳板机</a>
        </div>
        <div class="navbar-default sidebar" role="navigation">
          <ul class="nav navbar-top-links navbar-right">
          </ul>
          <div class="sidebar-nav navbar-collapse">
            <ul class="nav" id="side-menu">
              <li>
                <a href="#"><i class="fa fa-dashboard fa-fw"></i> 控制面板</a>
              </li>
              <li>
                <a href="#"><i class="fa fa-sitemap fa-fw"></i> 设备管理<span class="fa arrow"></span></a>
                <ul class="nav nav-second-level">
                  <li>
                    <router-link to="/hosts">
                      设备列表
                    </router-link>
                  </li>
                </ul>
                <!-- /.nav-second-level -->
              </li>
            </ul>
          </div>
          <!-- /.sidebar-collapse -->
        </div>
        <!-- /.navbar-static-side -->
      </nav>
      <!-- Navigation -->
    </div>
    <div id="page-wrapper">
    <router-view>
    </router-view>
    </div>
  </div>
</template>

<script>
  export default {name: 'App'}
</script>

<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
  }
</style>
